<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>美兰数据文化馆与图书馆</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/huazhi/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/huazhi/css/public.css" media="all">
    <link rel="shortcut icon" href="<%=request.getContextPath()%>/huazhi/images/favicon.ico"/>
</head>
<style>
    /* 底部固定区域 */
    .layui-layout-admin .layui-footer {
        padding: 10px 0;
        text-align: center;
    }

    .layui-layout-admin .layui-footer {
        background-color: #fff;
    }

    .layuiadmin-badge {
        position: absolute;
        top: 40%;
        margin-top: -9px;
        right: 15px;
    }

    li {
        list-style: decimal;
        counter-reset: sectioncounter;
        content: counter(sectioncounter) "、";
    }

</style>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" lay-filter="component-form-element">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-sm6">
                        <div class="layui-tab-content" style="height: auto">
                            <div class="layui-form-item">
                                <div class="layui-col-lg12">
                                    <div class="layui-col-xs11">
                                        <label class="layui-form-label">物品用途</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="purpose" lay-verify="purpose"
                                                   autocomplete="off" placeholder="请输入物品用途(如：日常办公)"
                                                   class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-col-xs1">
                                        <div class="layui-form-mid layui-word-aux"
                                             style="color: red !important;padding: 10px !important;">*
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-col-lg12">
                                    <div class="layui-col-xs11">
                                        <label class="layui-form-label">领用人</label>
                                        <div class="layui-input-block">
                                    <input type="text" name="recipients"
                                              autocomplete="off" placeholder="请输入领用人"
                                              class="layui-input">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-col-lg12">
                                    <div class="layui-col-xs11">
                                        <label class="layui-form-label">领用时间</label>
                                        <div class="layui-input-block">
                                    <input type="text" name="collectiontimestring" id="collectiontimestring"
                                              autocomplete="off" placeholder="请输入领用时间"
                                              class="layui-input" readonly="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-col-lg12">
                                    <div class="layui-col-xs11">
                                        <label class="layui-form-label">领用详情</label>
                                        <div class="layui-input-block">
                                    <textarea type="text" name="collectioninfo"
                                              autocomplete="off" placeholder="请输入领用详情"
                                              class="layui-textarea"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <fieldset class="layui-elem-field layui-field-title site-title">
                                <legend>
                                    <button type="button" id="newadd-btn"
                                            class="submit-btn layui-btn layui-btn-normal layui-btn-sm addlist-btn">新增
                                    </button>
                                </legend>
                            </fieldset>
<%--                            <input type="text" id="lmrIndex" value="0">--%>
<%--                            <input type="text" id="arr" value="0">--%>
                            <ol class="addlmrlist-contanerbox">
                                <li id="lmr-0">
                                    <div class="layui-card-header" style="padding: 0 10px;">物品明细
                                        <%--                            <a href="javascript:;" class="layui-btn layui-btn-danger layui-btn-xs layuiadmin-badge" onclick="del('lmr-0')">删除</a>--%>
                                    </div>
                                    <div class="layui-tab-content" style="height: auto">
                                        <div class="layui-form-item">
                                            <div class="layui-col-lg12">
                                                <div class="layui-col-xs11">
                                                    <label class="layui-form-label">物品名称</label>
                                                    <div class="layui-input-block">
                                                        <input type="text" name="name" id="lmrname0" lay-verify="name"
                                                               autocomplete="off" placeholder="请输入物品名称"
                                                               class="layui-input" >
                                                    </div>
                                                </div>
                                                <div class="layui-col-xs1">
                                                    <div class="layui-form-mid layui-word-aux"
                                                         style="color: red !important;padding: 10px !important;">*
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <div class="layui-col-lg12">
                                                <div class="layui-col-xs11">
                                                    <label class="layui-form-label">数量</label>
                                                    <div class="layui-input-block">
                                                        <input type="text" name="idcode" id="lmrid0"
                                                               lay-verify="idcode"
                                                               autocomplete="off" placeholder="请输入数量"
                                                               class="layui-input"
                                                               oninput="value=value.replace(/[^\d]+/g,'')"  maxlength="9">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ol>
                        </div>
                    </div>
                    <div class="layui-col-sm6">

                        <input type=hidden id="image" name=image>
                        <blockquote class="layui-elem-quote news_search">
                            <div class="layui-inline">
                                <input type="checkbox" name="selectAll" id="selectAll" lay-filter="selectAll"
                                       lay-skin="primary" title="全选">
                            </div>
                            <div class="layui-inline" style="margin-right:10px">
                                <a class="layui-btn layui-btn-sm layui-btn-danger batchDel">批量删除</a>
                            </div>
                            <div class="layui-inline">
                                <a class="layui-btn layui-btn-sm uploadNewImg"><i class="layui-icon"></i>上传图片</a>
                            </div>
                        </blockquote>
                        <ul class="layer-photos-demo" id="Images"></ul>
                    </div>

                </div>
                <div class="layui-form-item layui-layout-admin">
                    <div class="layui-footer" style="left: 0;padding: 0px;">
                        <button class="layui-btn" lay-submit lay-filter="*" id="pushButton">立即提交</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="<%=request.getContextPath()%>/huazhi/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="<%=request.getContextPath()%>/huazhi/lib/layui-v2.5.5/layui.all.js"></script>

<script>
    layui.use(['form', 'laydate'], function () {
        var $ = layui.$
            , form = layui.form
            , laydate = layui.laydate
            , layer = layui.layer;

        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var date = date.getDate();
        var now = year + '-' + p(month) + "-" + p(date);

        function p(s) {
            return s < 10 ? '0' + s : s;
        }

        laydate.render({
            elem: "#collectiontimestring",
            btns: ['now', 'confirm'],
            theme: 'molv',
            value: now,
            calendar: true
        });


        $('#newadd-btn').on('click', function () {//新增联名人
            var lmrIndex = $("#lmrIndex").val();
            lmrIndex = parseInt(lmrIndex) + 1;
            console.log(lmrIndex)
            $("#lmrIndex").val(lmrIndex);
            var name = '<div class="layui-form-item"><div class="layui-col-lg12"><div class="layui-col-xs11"><label class="layui-form-label">物品名称</label>' +
                '<div class="layui-input-block"><input type="text" name="name"id="lmrname' + lmrIndex + '"lay-verify="name"' +
                'autocomplete="off" placeholder="请输入物品名称"' +
                'class="layui-input">' +
                '</div></div><div class="layui-col-xs1"><div class="layui-form-mid layui-word-aux" style="color: red !important;padding: 10px !important;">*' +
                '</div></div></div></div>'
            var count = '<div class="layui-form-item"><div class="layui-col-lg12"><div class="layui-col-xs11"><label class="layui-form-label">数量</label>' +
                '<div class="layui-input-block"><input type="text" name="count" id="lmrcount' + lmrIndex + '"lay-verify="count"' +
                'autocomplete="off" placeholder="请输入数量"' +
                'class="layui-input" oninput="value=value.replace(/[^\\d]+/g,\'\')" maxlength="9">' +
                '</div></div></div></div></div>'
            var wholeList = '<li id="lmr-' + lmrIndex + '">' +
                '<div class="layui-card-header" style="padding: 0 10px;">物品明细<a href="javascript:;" class="layui-btn layui-btn-danger layui-btn-xs layuiadmin-badge" onclick="del(\'' + lmrIndex + '\')">删除</a></div>' +
                '<div class="layui-tab-content" style="height: auto">' + name +
                count + '</div></li>'
            // var newcontent = $(".addlmrlist-contanerbox").html();
            $('.addlmrlist-contanerbox').append(wholeList);

            var arr = $("#arr").val()
            $("#arr").val(arr + "," + lmrIndex)
        });
        // //自定义验证规则
        form.verify({

        });



    });

    function del(id) {
        $("#lmr-" + id).remove();
        var str = $("#arr").val()
        var arr = str.split(',')
        console.log(arr);
        arr = arr.filter(function (item) {
            return item != id
        });
        console.log(arr);
        var s = arr.toString();
        $("#arr").val(s)
    }

</script>
</body>
</html>